<template>
  <div class="login">
    <img src="http://img1.360buyimg.com/pop/s590x470_jfs/t1/30014/35/15026/86084/5cc10fd8Edae8a0a1/d778eeee77e56eda.jpg!q90!cc_590x470.webp"
         alt=""
         class="banner">
    <cube-form :model="model"
               :schema="schema"
               @submit="submitHandler">
    </cube-form>
    <span class="Toast"
          v-if="flag">
      {{message}}
    </span>
    <router-link to="/register"
                 class="register">
      免费注册
    </router-link>
  </div>
</template>
<script>
import { setTimeout } from 'timers'
export default {
  data () {
    return {
      message: '',
      flag: false,
      model: {
        username: '',
        password: ''
      },
      schema:
      {
        fields: [
          // 用户名配置
          {
            type: 'input',
            modelKey: 'username',
            label: '用户名',
            props:
            {
              placeholder: '请输入用户名'
            },
            rules: {
              required: true,
              type: 'string',
              min: 3,
              max: 15
            },
            trigger: 'blur',
            messages:
            {
              required: '用户名不能为空',
              mix: '用户名不能少于3个字符',
              max: '用户名不能大于15个字符'
            }
          },
          // 用户名配置
          {
            type: 'input',
            modelKey: 'password',
            label: '密码',
            props:
            {
              placeholder: '请输入密码',
              type: 'password',
              eye:
              {
                open: false
              }
            },
            rules: {
              required: true,
              mix: 3,
              max: 15
            },
            trigger: 'blur',
            messages:
            {
              required: '密码不能为空'
            }
          },
          {
            type: 'submit',
            label: '登录'
          }
        ]
      }
    }
  },
  methods: {
    async submitHandler (e) {
      e.preventDefault()
      try {
        const result = await this.$http.get('/api/login', { params: this.model })
        console.log(result)
        if (result.code === 0) {
          this.message = result.message
          this.$store.commit('settoken', result.token)
          // 判断路由是否带有参数，有则去参数页面，没有去首页
          if (this.$route.query.redirect) {
            this.$router.replace({ path: this.$route.query.redirect })
          } else {
            this.$router.replace({ path: '/footernav/index' })
          }
        } else {
          this.message = result.message
        }

        this.show()
      } catch (error) {
        console.log(error)
      }
    },
    show () {
      this.flag = true
      setTimeout(() => {
        this.flag = false
      }, 2000)
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  .banner {
    width: 100%;
  }
  .Toast {
    background-color: #fff;
    color: black;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    padding: 20px 20px;
  }
  .register {
    font-size: 25px;
    display: flex;
    justify-content: center;
  }
}
</style>
